<template>
  <div style="width: 100%;display: flex;flex-direction: column;align-items: center;">
    <div class="good-list-outer-outer"
         :style="state.tertiary_type!=null?{}:{'background-color': '#f5f5f5','border-bottom': '0.1px solid rgb(223, 223, 225)'}"
         style="padding-top: 0;padding-bottom: 0;width: 100%;display: flex;flex-direction: column;align-items: center;box-sizing: border-box;">
      <div style="flex: 100%;;box-sizing: border-box;padding: 0" class="good-list-outer-outer">
        <div class="good-list-outer-outer" style="box-sizing: border-box">
          <div>
            <div style="padding: 8px 8px 0 16px">
              <a-breadcrumb>
                <a-breadcrumb-item @click="toHome" style="cursor: pointer">
                  <HomeOutlined/>
                </a-breadcrumb-item>
                <a-breadcrumb-item @click="select0" style="cursor: pointer">
                  Goods list
                </a-breadcrumb-item>
                <a-breadcrumb-item v-if="state.primary_type!=null" @click="select1(null)" style="cursor: pointer">
                  <span>{{ state.primary_type.type }}</span>
                </a-breadcrumb-item>
                <a-breadcrumb-item v-if="state.secondary_type!=null" @click="select2(null)" style="cursor: pointer">
                  <span>{{ state.secondary_type.type }}</span>
                </a-breadcrumb-item>
                <a-breadcrumb-item v-if="state.tertiary_type!=null" @click="select3(null)" style="cursor: pointer">
                  <span>{{ state.tertiary_type.type }}</span>
                </a-breadcrumb-item>
              </a-breadcrumb>
            </div>
          </div>
        </div>
        <div style="box-sizing: border-box;padding: 0 10px;">

          <h1 v-if="state.tertiary_type==null&&state.secondary_type!=null" style="margin: 10px 0">
            {{ state.secondary_type.type }}
          </h1>
          <h1 v-else-if="state.tertiary_type==null&&state.primary_type!=null&&state.primary_type.type!=null"
              style="margin: 10px 0">
            {{ state.primary_type.type }}
          </h1>

          <div
              style="display: flex;flex-direction: row;flex-wrap: wrap;align-content: center;align-items: stretch;justify-content: flex-start;box-sizing: border-box;margin-bottom: 10px;">


            <div v-if="secondaryTypeList==null" style="display: inline;box-sizing: border-box;margin: 5px 0;"
                 v-for="type in primaryTypeList" class="selection-item-outer">
              <basic-card :padding="false" style="padding: 0;width: 100%;height: 100%;box-sizing: border-box"
                          @click="se1(type)">
                <div
                    style="display: flex;flex-direction: row;align-content: center;align-items: center;background-color: #fff;border-radius: 0.8em;justify-content: flex-start;padding: 4px;height: 100%;">

                  <img style="border-radius: 0.8em;" class="selection-item-photo" :src="type.photo"
                       v-if="type.photo!=null">
                  <div v-if="type.photo!=null" style="padding-left: 10px;" class="selection-item-text">
                    {{ type.type }}
                  </div>
                  <div v-if="type.photo==null" class="selection-item-text-no-photo"
                       style="flex: 100%;padding: 10px;box-sizing: border-box;display: flex;flex-direction: row;align-content: center;align-items: center;justify-content: flex-start;">
                    {{ type.type }}
                  </div>

                </div>
              </basic-card>

            </div>
            <div v-if="secondaryTypeList!=null&&tertiaryTypeList==null"
                 style="display: inline;padding: 10px;box-sizing: border-box" v-for="type in secondaryTypeList"
                 class="selection-item-outer">
              <basic-card :padding="false"
                          style="padding: 0;width: 100%;height: 100%;box-sizing: border-box;margin: 5px 0;"
                          @click="se2(type)">
                <div
                    style="display: flex;flex-direction: row;align-content: center;align-items: center;background-color: #fff;border-radius: 0.8em;justify-content: flex-start;padding: 4px;height: 100%;">

                  <img style="border-radius: 0.8em;" class="selection-item-photo" :src="type.photo"
                       v-if="type.photo!=null">
                  <div v-if="type.photo!=null" style="padding-left: 10px;" class="selection-item-text">
                    {{ type.type }}
                  </div>
                  <div v-if="type.photo==null" class="selection-item-text"
                       style="flex: 100%;padding: 10px;box-sizing: border-box;display: flex;flex-direction: row;align-content: center;align-items: center;justify-content: flex-start;">
                    {{ type.type }}
                  </div>

                </div>
              </basic-card>

            </div>
            <div v-if="tertiaryTypeList!=null&&state.tertiary_type==null"
                 style="display: inline;padding: 10px;box-sizing: border-box;margin: 5px 0;"
                 v-for="type in tertiaryTypeList"
                 class="selection-item-outer">
              <basic-card :padding="false" style="padding: 0;width: 100%;height: 100%;box-sizing: border-box"
                          @click="se3(type)">
                <div
                    style="display: flex;flex-direction: row;align-content: center;align-items: center;background-color: #fff;border-radius: 0.8em;justify-content: flex-start;padding: 4px;height: 100%;">

                  <img style="border-radius: 0.8em;" class="selection-item-photo" :src="type.photo"
                       v-if="type.photo!=null">
                  <div v-if="type.photo!=null" style="padding-left: 10px;" class="selection-item-text">
                    {{ type.type }}
                  </div>
                  <div v-if="type.photo==null" class="selection-item-text"
                       style="flex: 100%;padding: 10px;box-sizing: border-box;display: flex;flex-direction: row;align-content: center;align-items: center;justify-content: flex-start;">
                    {{ type.type }}
                  </div>

                </div>
              </basic-card>

            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="good-list-outer-outer" style="width: 1550px;" ref="containerRef">

      <a-row justify="space-between" align="top" ref="shopList">
        <a-col class="show-min-768px">
          <div
              style="box-sizing: border-box;max-height: calc(100vh - 115px);padding: 0px 0!important;"
              class="trzqazdwdq" :style="';margin-top:'+shopMenuMarginTop+'px;'" ref="affix">
            <div
                style="border-radius: 10px;overflow-y:scroll;max-height: calc(100vh - 115px);overflow-x:hidden;box-sizing: border-box;padding: 10px 0;background-color: rgb(245, 245, 245);">
              <div class="shop-menu"
                   style="background-color: rgb(245, 245, 245);box-sizing: border-box;padding: 10px 10px;border-radius: 10px;max-height: calc(100vh - 135px);">

                <div style="box-sizing: border-box;padding:  5px 8px;">
                  <h2 v-if="state.tertiary_type!=null" style="margin: 0;">
                    {{ state.tertiary_type.type }}
                  </h2>
                  <h2 v-else-if="state.tertiary_type==null&&state.secondary_type!=null" style="margin: 0;">
                    {{ state.secondary_type.type }}
                  </h2>
                  <h2 v-else-if="state.tertiary_type==null&&state.primary_type!=null&&state.primary_type.type!=null"
                      style="margin: 0;">
                    {{ state.primary_type.type }}
                  </h2>
                </div>
                <div
                    style="display: flex;flex-direction: row;flex-wrap: wrap;align-content: center;align-items: stretch;justify-content: flex-start;box-sizing: border-box">
                  <div v-if="secondaryTypeList==null"
                       style="display: inline;box-sizing: border-box;flex: 100%;padding: 4px 3px"
                       v-for="type in primaryTypeList" class="selection-item-outer">
                    <basic-card :padding="false"
                                style="padding: 0;width: 100%;height: 100%;box-sizing: border-box;cursor: pointer"
                                @click="se1(type)">
                      <div
                          style="display: flex;flex-direction: row;align-content: center;align-items: center;background-color: #fff;border-radius: 0.8em;justify-content: flex-start;padding: 4px;">

                        <img style="border-radius: 0.8em;" class="selection-item-photo" :src="type.photo"
                             v-if="type.photo!=null">
                        <div v-if="type.photo!=null" style="padding-left: 10px;" class="selection-item-text">
                          {{ type.type }}
                        </div>
                        <div v-if="type.photo==null" class="selection-item-text-no-photo"
                             style="flex: 100%;padding: 10px;box-sizing: border-box;display: flex;flex-direction: row;align-content: center;align-items: center;justify-content: flex-start;">
                          {{ type.type }}
                        </div>

                      </div>
                    </basic-card>
                  </div>
                  <div v-if="secondaryTypeList!=null&&tertiaryTypeList==null"
                       style="display: inline;box-sizing: border-box;padding: 4px 3px;flex: 100%;"
                       v-for="type in secondaryTypeList"
                       class="selection-item-outer">
                    <basic-card :padding="false"
                                style="padding: 0;width: 100%;height: 100%;box-sizing: border-box;flex: 100%;"
                                @click="se2(type)">
                      <div
                          style="display: flex;flex-direction: row;align-content: center;align-items: center;background-color: #fff;border-radius: 0.8em;justify-content: flex-start;padding: 4px;">

                        <img style="border-radius: 0.8em;" class="selection-item-photo" :src="type.photo"
                             v-if="type.photo!=null">
                        <div v-if="type.photo!=null" style="padding-left: 10px;" class="selection-item-text">
                          {{ type.type }}
                        </div>
                        <div v-if="type.photo==null" class="selection-item-text"
                             style="flex: 100%;padding: 10px;box-sizing: border-box;display: flex;flex-direction: row;align-content: center;align-items: center;justify-content: flex-start;">
                          {{ type.type }}
                        </div>

                      </div>
                    </basic-card>
                  </div>
                  <div v-if="tertiaryTypeList!=null"
                       style="display: inline;box-sizing: border-box;padding: 4px 3px;flex: 100%;"
                       v-for="type in tertiaryTypeList"
                       class="selection-item-outer">
                    <basic-card :padding="false"
                                style="padding: 0;width: 100%;height: 100%;box-sizing: border-box;flex: 100%;cursor: pointer;"
                                @click="se3(type)">
                      <div
                          style="display: flex;flex-direction: row;align-content: center;align-items: center;background-color: #fff;border-radius: 0.8em;justify-content: flex-start;padding: 4px;">

                        <img style="border-radius: 0.8em;" class="selection-item-photo" :src="type.photo"
                             v-if="type.photo!=null">
                        <div v-if="type.photo!=null" style="padding-left: 10px;" class="selection-item-text">
                          {{ type.type }}
                        </div>
                        <div v-if="type.photo==null" class="selection-item-text"
                             style="flex: 100%;padding: 10px;box-sizing: border-box;display: flex;flex-direction: row;align-content: center;align-items: center;justify-content: flex-start;">
                          {{ type.type }}
                        </div>

                      </div>
                    </basic-card>
                  </div>
                </div>
              </div>

            </div>
          </div>
        </a-col>
        <a-col class="show-min-768px shop-list" flex="auto" ref="shopList">
          <div style="display: flex;flex-direction: column;align-items: stretch"
               v-if="state.goodList!=null&&state.goodList.length>0">
            <a-spin :spinning="state.isRefreshing" style="width: 100%" size="large">

              <h1 v-if="state.tertiary_type!=null">
                {{ state.tertiary_type.type }}
              </h1>

              <GoodItemList :good-list="state.goodList"></GoodItemList>
            </a-spin>
            <div style="display: flex;justify-content: center;margin-top: 30px;">
              <a-pagination
                  class="show-min-576px"
                  :current="state.current"
                  :page-size-options="pageSizeOptions"
                  :total="state.total"
                  show-size-changer
                  :page-size="state.pageSize"
                  @showSizeChange="onShowSizeChange"
                  @change="onPageChange"
                  :defaultPageSize="10"
                  :show-total="(total, range) => `${range[0]}-${range[1]} of ${total} items`"
              >
                <template #buildOptionText="props">
                  <span>{{ props.value }} item/page</span>
                </template>
              </a-pagination>
              <a-pagination
                  class="show-max-576px"
                  size="small"
                  :current="state.current"
                  :page-size-options="pageSizeOptions"
                  :total="state.total"
                  show-size-changer
                  :page-size="state.pageSize"
                  @showSizeChange="onShowSizeChange"
                  @change="onPageChange"
                  :defaultPageSize="10"
              >
              </a-pagination>
            </div>
          </div>
          <div style="display: flex;flex-direction: column;align-items: center;margin-top: 100px;" v-else>
            <a-empty :image="Empty.PRESENTED_IMAGE_DEFAULT">
              <template #description>
                <div class="good-list-font" imageStyle="">
                  No results from your search
                </div>
              </template>
            </a-empty>
          </div>
        </a-col>
        <a-col :span="24" class="show-max-768px">
          <div style="display: flex;flex-direction: column;align-items: stretch"
               v-if="state.goodList!=null&&state.goodList.length>0">
            <a-spin :spinning="state.isRefreshing" style="width: 100%" size="large">

              <h1 v-if="state.tertiary_type!=null">
                {{ state.tertiary_type.type }}
              </h1>

              <GoodItemList :good-list="state.goodList"></GoodItemList>
            </a-spin>
            <div style="display: flex;justify-content: center;margin-top: 20px;">
              <a-pagination
                  class="show-min-576px"
                  v-model:current="state.current"
                  :page-size-options="pageSizeOptions"
                  :total="state.total"
                  show-size-changer
                  :page-size="state.pageSize"
                  @showSizeChange="onShowSizeChange"
                  @change="onPageChange"
                  :defaultPageSize="12"
                  :show-total="(total, range) => `${range[0]}-${range[1]} of ${total} items`"
              >
                <template #buildOptionText="props">
                  <span>{{ props.value }}条/页 </span>
                </template>
              </a-pagination>
              <a-pagination
                  class="show-max-576px"
                  size="small"
                  v-model:current="state.current"
                  :page-size-options="pageSizeOptions"
                  :total="state.total"
                  show-size-changer
                  :page-size="state.pageSize"
                  @showSizeChange="onShowSizeChange"
                  @change="onPageChange"
                  :defaultPageSize="12"
              >
              </a-pagination>
            </div>
          </div>
          <div style="display: flex;flex-direction: column;align-items: center;margin-top: 100px;" v-else>
            <a-empty :image="Empty.PRESENTED_IMAGE_DEFAULT">
              <template #description>
                <div class="good-list-font" imageStyle="">
                  您搜索的内容没有结果哦
                </div>
              </template>
            </a-empty>
          </div>
        </a-col>
      </a-row>
    </div>
  </div>


</template>

<script>
import {defineComponent, ref, reactive, computed, watch, onMounted, onUnmounted} from "vue";
import {useRoute, useRouter} from 'vue-router'
import {useStore} from 'vuex'
import {HomeOutlined, UserOutlined} from '@ant-design/icons-vue';
import GoodItemList from "./GoodItemList.vue";
import {searchFavoriteByPage} from "../../api/FavoriteRequest";
import {Empty, notification} from "ant-design-vue";
import {searchGoodByType} from "../../api/GoodRequest";
import {searchTypeAllAsTree} from "../../api/GoodTypeRequest";

export default defineComponent({
  name: "GoodList",
  components: {
    GoodItemList,
    HomeOutlined,
    UserOutlined
  },
  emits: [
    'log'
  ],
  setup(props, context) {
    const route = useRoute();
    const router = useRouter();
    const store = useStore();

    const searchDate = computed(() => {
      return {
        path: route.query,
        params: route.params
      }
    })

    const changeSearchRoot = (type1 = null, type2 = null, type3 = null, current = 1, pageSize = 12) => {
      let newRoute = {
        name: route.name,
        params: {},
        query: {}
      }
      newRoute.params.type = []
      if (type1 != null) newRoute.params.type.push(type1.id.toString())
      if (type2 != null) newRoute.params.type.push(type2.id.toString())
      if (type3 != null) newRoute.params.type.push(type3.id.toString())
      if (searchDate.value.path.text != null) newRoute.query.text = searchDate.value.path.text.toString();

      newRoute.query.current = current;
      newRoute.query.pageSize = pageSize;

      console.log(newRoute)
      router.push(newRoute);
    }

    const refreshTitleBarName = () => {
      if (searchDate.value.params != null && searchDate.value.params.type != null && searchDate.value.params.type.length > 0) {
        if (typeMap.value.has(searchDate.value.params.type[0])) {
          state.primary_type = typeMap.value.get(searchDate.value.params.type[0])
          document.title = state.primary_type.type
          if (searchDate.value.params.type.length > 1) {
            if (typeMap.value.has(searchDate.value.params.type[1]) && typeMap.value.get(searchDate.value.params.type[1]).parentId == state.primary_type.id) {
              state.secondary_type = typeMap.value.get(searchDate.value.params.type[1])
              document.title = state.secondary_type.type
              if (searchDate.value.params.type.length > 2) {
                if (typeMap.value.has(searchDate.value.params.type[2]) && typeMap.value.get(searchDate.value.params.type[2]).parentId == state.secondary_type.id) {
                  state.tertiary_type = typeMap.value.get(searchDate.value.params.type[2])
                  document.title = state.tertiary_type.type
                } else {
                  state.tertiary_type = null;
                }
              } else {
                state.tertiary_type = null;
              }
            } else {
              state.secondary_type = null;
              state.tertiary_type = null;
            }
          } else {
            state.secondary_type = null;
            state.tertiary_type = null;
          }
        } else {
          state.primary_type = null;
          state.secondary_type = null;
          state.tertiary_type = null;
        }
      } else {
        state.primary_type = null;
        state.secondary_type = null;
        state.tertiary_type = null;
      }
      state.pageSize = route.query.pageSize || 12;
      state.current = route.query.current || 1;
    }

    watch([() => route.query, () => route.params], () => {
      state.pageSize = route.query.pageSize || 12;
      state.current = route.query.current || 1;
      document.title = 'Goods list'
      if (typeMap.value == null) {
        funList.unshift(refreshTitleBarName);
      } else {
        refreshTitleBarName();
      }
      toSearchGood();
    })
    const zqa = computed(() => store.state.globalInfo.goodTypeTreeList)
    // const typeMap = ref(null);
    const typeMap = computed(() => {
      if (zqa.value == null) {
        return null;
      }
      let type = new Map()
      let goodTypeTreeList = JSON.parse(JSON.stringify(zqa.value));
      if (goodTypeTreeList != null && goodTypeTreeList.length > 0) {
        for (let i = 0; i < goodTypeTreeList.length; i++) {
          type.set(goodTypeTreeList[i].id, goodTypeTreeList[i])
          if (goodTypeTreeList[i].children != null)
            for (let j = 0; j < goodTypeTreeList[i].children.length; j++) {
              type.set(goodTypeTreeList[i].children[j].id, goodTypeTreeList[i].children[j])
              if (goodTypeTreeList[i].children[j].children != null)
                for (let k = 0; k < goodTypeTreeList[i].children[j].children.length; k++) {
                  type.set(goodTypeTreeList[i].children[j].children[k].id, goodTypeTreeList[i].children[j].children[k])
                }
            }
        }
        return type
        // funList.forEach(f => f())
      } else {
        return new Map()
      }
    })
    //
    // watch(() => store.state.globalInfo.goodTypeTreeList, (nval) => {
    //   console.log(1313,nval)
    //   if (nval == null) {
    //     typeMap.value = null;
    //     return
    //   }
    //   let type = new Map()
    //   let goodTypeTreeList = JSON.parse(JSON.stringify(nval));
    //   if (goodTypeTreeList != null && goodTypeTreeList.length > 0) {
    //     for (let i = 0; i < goodTypeTreeList.length; i++) {
    //       type.set(goodTypeTreeList[i].id, goodTypeTreeList[i])
    //       if (goodTypeTreeList[i].children != null)
    //         for (let j = 0; j < goodTypeTreeList[i].children.length; j++) {
    //           type.set(goodTypeTreeList[i].children[j].id, goodTypeTreeList[i].children[j])
    //           if (goodTypeTreeList[i].children[j].children != null)
    //             for (let k = 0; k < goodTypeTreeList[i].children[j].children.length; k++) {
    //               type.set(goodTypeTreeList[i].children[j].children[k].id, goodTypeTreeList[i].children[j].children[k])
    //             }
    //         }
    //     }
    //     typeMap.value = type
    //     funList.forEach(f => f())
    //   } else {
    //     typeMap.value = new Map()
    //   }
    // })

    // const typeMap = computed(() => {
    //   let type = new Map()
    //   console.log('000')
    //   if(store.state.globalInfo==null)return;
    //   let goodTypeTreeList = JSON.parse(JSON.stringify(store.state.globalInfo.goodTypeTreeList));
    //   if (goodTypeTreeList != null && goodTypeTreeList.length > 0) {
    //     for (let i = 0; i < goodTypeTreeList.length; i++) {
    //       type.set(goodTypeTreeList[i].id, goodTypeTreeList[i])
    //       if (goodTypeTreeList[i].children != null)
    //         for (let j = 0; j < goodTypeTreeList[i].children.length; j++) {
    //           type.set(goodTypeTreeList[i].children[j].id, goodTypeTreeList[i].children[j])
    //           if (goodTypeTreeList[i].children[j].children != null)
    //             for (let k = 0; k < goodTypeTreeList[i].children[j].children.length; k++) {
    //               type.set(goodTypeTreeList[i].children[j].children[k].id, goodTypeTreeList[i].children[j].children[k])
    //             }
    //         }
    //     }
    //
    //     console.log(222,typeMap.value)
    //     funList.forEach(f => f())
    //     return type
    //   } else {
    //     return null
    //   }
    // })


    let funList = []

    onMounted(async () => {
      state.pageSize = route.query.pageSize || 12;
      state.current = route.query.current || 1;
      console.log(state.current)
      console.log(state.pageSize)
      window.addEventListener('scroll', watchAffix);
      new Promise((resolve) => {
        if (typeMap.value == null) {
          funList.push(resolve);
        } else {
          resolve();
        }
      }).then(() => {
        console.log(333, typeMap.value)
        if (searchDate.value.params != null && searchDate.value.params.type != null && searchDate.value.params.type.length > 0) {
          if (typeMap.value.has(searchDate.value.params.type[0])) {
            state.primary_type = typeMap.value.get(searchDate.value.params.type[0])
            if (searchDate.value.params.type.length > 1) {
              if (typeMap.value.has(searchDate.value.params.type[1])) {
                state.secondary_type = typeMap.value.get(searchDate.value.params.type[1])
                if (searchDate.value.params.type.length > 2) {
                  if (typeMap.value.has(searchDate.value.params.type[2])) {
                    state.tertiary_type = typeMap.value.get(searchDate.value.params.type[2])
                  }
                }
              }
            }
          }
        }
      }).finally(() => {
        toSearchGood();
      })
    })
    let screenHeight = document.documentElement.clientHeight || document.body.clientHeight;
    const watchAffix = () => {
      if (containerRef.value == null) {
        shopMenuMarginTop.value = 0;
        return;
      }
      if (affix.value == null) {
        shopMenuMarginTop.value = 0;
        return;
      }
      let containerRefTopToWindowTop = containerRef.value.getBoundingClientRect().top;
      let containerRefBottomToWindowTop = containerRef.value.getBoundingClientRect().bottom;
      let containerRefHeight = containerRef.value.offsetHeight;
      let affixHeight = affix.value.offsetHeight;

      let e = shopMenuMarginTop.value;
      if (containerRefTopToWindowTop - 100 <= 0) {
        if (containerRefBottomToWindowTop < screenHeight) {
          if (affixState.value) {
            e = containerRefHeight - affixHeight;
            affixState.value = false;
          }
        } else {
          affixState.value = true;
          e = 100 - containerRefTopToWindowTop;
        }
      } else {
        affixState.value = false;
        e = 0;
      }
      shopMenuMarginTop.value = e

    }
    const affixState = ref(false);
    const containerRef = ref();
    const affix = ref();
    const shopMenuMarginTop = ref(0);
    onUnmounted(() => {
      window.removeEventListener('scroll', watchAffix);
      window.removeEventListener('scroll', watchAffix);
    })


    const text = `A dog is a type of domesticated animal.Known for its loyalty and faithfulness,it can be found as a welcome guest in many households across the world.`;
    const activeKey = ref([]);

    const itemSelectionIndex = ref(null);
    const changeItemSelection = (index) => {
      itemSelectionIndex.value = index;
    }
    //
    const inputValue = ref();

    const showSelectionDrawerState = ref(false);

    const afterShowSelectionDrawerStateChange = () => {

    }

    const state = reactive({
      primary_type: null,
      secondary_type: null,
      tertiary_type: null,
      isRefreshing: false,
      current: 1,
      pageSize: 12,
      total: 0,
      goodList: []
    })

    const primaryTypeList = computed(() => {
      return store.state.globalInfo.goodTypeTreeList
    })
    const secondaryTypeList = computed(() => {
      return state.primary_type == null ? null : state.primary_type.children
    })
    const tertiaryTypeList = computed(() => {
      return state.secondary_type == null ? null : state.secondary_type.children
    })

    const pageSizeOptions = ref(['12', '24', '36', '48', '60']);


    const toSearchGood = async () => {

      state.pageSize = route.query.pageSize || 12;
      state.current = route.query.current || 1;

      console.log(state.current)

      if (state.isRefreshing) return;
      state.isRefreshing = true;

      await searchGoodByType(
          (route.params == null || route.params.type == null || route.params.type.length == 0) ? null : route.params.type[route.params.type.length - 1],
          state.current,
          state.pageSize,
          typeof searchDate.value.path.text == 'string' ? searchDate.value.path.text : null
      ).then((res) => {
        if (res.data.result != undefined) {
          if (res.data.result.current != null) state.current = res.data?.result?.current
          if (res.data.result.total != null) state.total = res.data?.result?.total
          if (res.data.result.size != null) state.pageSize = res.data?.result?.size
          //@ts-ignored
          if (res.data.result.records != null) state.goodList = res.data?.result?.records
        }
      }).catch((res) => {
        notification['success']({
          message: 'Action Success',
        });
      }).finally(() => {
        state.isRefreshing = false;
      })
    }

    const onPageChange = async (val) => {
      state.current = typeof val == 'string' ? Number.parseInt(val) : val;
      changeSearchRoot(state.primary_type, state.secondary_type, state.tertiary_type, val, state.pageSize)
      // await toSearchGood();
    }

    const onShowSizeChange = async (current, pageSize) => {
      state.pageSize = typeof pageSize == 'number' ? pageSize : Number.parseInt(pageSize);
      changeSearchRoot(state.primary_type, state.secondary_type, state.tertiary_type, state.current, state.pageSize)
      await toSearchGood();
    };

    const select0 = () => {
      state.primary_type = null;
      state.secondary_type = null;
      state.tertiary_type = null;
      changeSearchRoot(state.primary_type, state.secondary_type, state.tertiary_type)
    }

    const select1 = () => {
      state.secondary_type = null;
      state.tertiary_type = null;
      changeSearchRoot(state.primary_type, state.secondary_type, state.tertiary_type)
    }
    const select2 = () => {
      state.tertiary_type = null;
      changeSearchRoot(state.primary_type, state.secondary_type, state.tertiary_type)
    }
    const select3 = () => {
      changeSearchRoot(state.primary_type, state.secondary_type, state.tertiary_type)
    }

    const se1 = (v) => {
      state.primary_type = v;
      select1();
    }
    const se2 = (v) => {
      state.secondary_type = v;
      select2();
    }
    const se3 = (v) => {
      state.tertiary_type = v;
      select3();
    }

    const shopList = ref();

    return {
      shopList,
      shopMenuMarginTop,
      affix,
      se1,
      se2,
      se3,
      select0,
      select1,
      select2,
      select3,
      primaryTypeList,
      toSearchGood,
      onPageChange,
      onShowSizeChange,
      pageSizeOptions,
      secondaryTypeList,
      tertiaryTypeList,
      changeSearchRoot,
      state,
      typeMap,
      inputValue,
      searchDate,
      activeKey,
      text,
      itemSelectionIndex,
      changeItemSelection,
      showSelectionDrawerState,
      afterShowSelectionDrawerStateChange,
      Empty,
      toHome() {
        router.push({
          path: '/'
        })
      },
      containerRef,
    }

  }
})
</script>

<style scoped lang="less">
.good-list-outer-outer {
  width: 1500px;
  box-sizing: border-box;;
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-content: center;
  align-items: stretch;
  justify-content: flex-start;

  max-width: 100vw;
  padding: 10px 30px;

  @media screen and (max-width: 1200px) {
    padding: 10px 20px;
  }
  @media screen and (max-width: 768px) {
    padding: 10px 10px;
  }
  @media screen and (max-width: 576px) {
    padding: 10px 5px;
  }
}

.good-list-font {
  display: inline-block;
  font-size: 20px;
  white-space: nowrap;
  line-height: 31.2px;
  @media screen and (max-width: 768px) {
    font-size: 17px;
    line-height: 24.8px;
  }
  @media screen and (max-width: 576px) {
    font-size: 14px;
    line-height: 25.6px;
  }

}

.ant-form-item {
  margin-bottom: 5px;
}


.show-max-576px {
  @media screen and (min-width: 577px) {
    display: none !important;
  }
}

.show-min-576px {
  @media screen and (max-width: 576px) {
    display: none !important;
  }
}


.show-max-768px {
  @media screen and (min-width: 769px) {
    display: none !important;
  }
}

.show-min-768px {
  @media screen and (max-width: 768px) {
    display: none !important;
  }
}

.selection-item-outer {
  flex: 0 0 25%;
  padding: 10px;

  .selection-item-photo {
    width: 70px;
    height: 70px;
  }

  .selection-item-text-no-photo {
    height: 70px;
  }

  .selection-item-text {
    font-size: 16px;
  }

  @media screen and (max-width: 1200px) {
    flex: 0 0 33.33333%;
    padding: 5px;
    .selection-item-photo {
      width: 60px;
      height: 60px;
    }

    .selection-item-text-no-photo {
      height: 60px;
    }

    .selection-item-text {
      font-size: 16px;
    }
  }
  @media screen and (max-width: 768px) {
    flex: 0 0 50%;
    padding: 2px;
    .selection-item-photo {
      width: 50px;
      height: 50px;
    }

    .selection-item-text-no-photo {
      height: 50px;
      font-size: 14px;
    }

    .selection-item-text {
      font-size: 14px;
    }
  }
}

.shop-menu {

  width: 310px;

  @media screen and (max-width: 1150px) {
    width: 250px;
  }
  @media screen and (max-width: 992px) {
    width: 240px;
  }
  @media screen and (max-width: 850px) {
    width: 230px;
  }
}

.shop-list {
  max-width: calc(100% - 330px);


  @media screen and (max-width: 1150px) {
    max-width: calc(100% - 270px);
  }
  @media screen and (max-width: 992px) {
    max-width: calc(100% - 250px);
  }
  @media screen and (max-width: 850px) {
    max-width: calc(100% - 250px);
  }
}

.trzqazdwdq {
  -webkit-transition: all .22s cubic-bezier(0.22, 0.61, 0.36, 1);
  transition: all .22s cubic-bezier(.22, .61, .36, 1);
}
</style>
